<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}"></script>
    <style>
        html,body{
            height: 100%;
            background: #efeaea;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .welcome-title{
            font-size: 20px;
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            text-align: center;
        }
        .login-box{
            border-radius: 10px;
            width: 400px;
            background: #fff;
            padding:20px 50px 20px 20px;
        }
        .layui-form-label{
            text-align: center;
        }
        .layui-btn{
            width: 100%;
        }
        .check-box{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .check-box a{
            margin: 0 20px;
        }
    </style>
</head>

<body>
 <div class="login-box">
     <div class="welcome-title" th:text="#{login.tip}">欢迎登录</div>
     <p style="color: red;margin-bottom: 20px;text-align: center;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
     <form class="layui-form" th:action="@{/user/login}" method="post">
         <div class="layui-form-item">
             <label class="layui-form-label" th:text="#{login.username}">账 号</label>
             <div class="layui-input-block">
                 <input type="text" name="username" required  lay-verify="username" th:placeholder="#{login.username}" autocomplete="off" class="layui-input">
             </div>
         </div>
         <div class="layui-form-item">
             <label class="layui-form-label" th:text="#{login.password}">密 码</label>
             <div class="layui-input-block">
                 <input type="password" name="password" required lay-verify="password" th:placeholder="#{login.password}" autocomplete="off" class="layui-input">
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-input-block">
                 <button class="layui-btn" lay-submit lay-filter="formDemo">[[ #{login.txt} ]]</button>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-input-block">
                 <div class="check-box">
                     <a th:href="@{index.html(l='zh_CN')}">中 文</a>
                     <a th:href="@{index.html(l='en_US')}">English</a>
                 </div>
             </div>
         </div>

     </form>
 </div>


<script>
    //Demo

    layui.use('form', function(){
        var form = layui.form;
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value === ''){
                    return '用户名不能为空';
                }
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
                if(value === 'cao'){
                    return '用户名不能为敏感词';
                }
            },
            password:(value,item)=>{
                if(value === ''){
                    return '密码不能为空';
                }
            }

        });
        //监听 登录提交
        form.on('submit(formDemo)', function(data){
            console.log(data)
        });
    });
</script>
</body>
</html>
